<!--公共考试类型管理-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div class="search-button color-warning" @click="addInfo()">
        <img src="../../../assets/assessment/icon-addRed.png" alt="" />
        <span>新增考试类型</span>
      </div>
    </div>
    <div class="table-container table-css">
      <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}"  >
        <el-table-column prop="courseName" label="操作" align="center" width="200">
            <div slot-scope="scope" style="margin:10px 0">
              <span class="small-btn edit-green" @click="addInfo(scope.row.id)">
                  <img src="../../../assets/assessment/icon-plan-record-detail.png"> 修改
              </span>
              <span class="small-btn delete-red" @click="deleteInfo(scope.row.id)" v-if="!scope.row.isfixed">
                  <img src="../../../assets/assessment/icon-delete.png"> 删除
              </span>
            </div>
        </el-table-column>
        <el-table-column prop="typeName" label="考试类型名称" align="center"></el-table-column>
        <el-table-column prop="unitName" label="负责单位" align="center"></el-table-column>
        <el-table-column prop="totalPoint" label="总分" align="center"> </el-table-column>
        <el-table-column prop="studentName" label="分数线" align="center" width="220">
          <div slot-scope="scope" class="fsx">
            <span class="item-name" v-if="scope.row.excellentLine">优秀线：{{scope.row.excellentLine}}</span>
            <span class="item-name" v-if="scope.row.goodLine">良好线：{{scope.row.goodLine}}</span>
            <span class="item-name" v-if="scope.row.passLine">及格线：{{scope.row.passLine}}</span>
          </div>
        </el-table-column>
        <el-table-column prop="rddate" label="主考" align="center">
          <template slot-scope="scope"><span v-for="item in scope.row.teacherList" :key="item.id">{{item.xm}}</span></template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注" align="center"></el-table-column>
      </el-table>
      <h1 class="total-notice">当前共找到{{total}}条记录，当前显示{{(dataForm.current-1)*50 == 0?1:(dataForm.current-1)*50}}-{{total>50?dataForm.current*50:total}}条</h1>
    </div>
    <div class="pagination-block">
      <el-pagination v-if="total>50" prev-text="上一页" next-text="下一页" @current-change="currentPage"
        :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <!-- 新增或编辑 -->
    <add-or-edit ref="addORedit" @addCodeValue="getList" :ID="ID"></add-or-edit>
    <!-- 删除 -->
    <del-notice ref="del" @delbtn="saveDel"></del-notice>
  </div>
</template>

<script>
import {examTypeList,deleteExamType} from "@/api/exam";
import addOrEdit from "./add.vue"
import delNotice from '../infoList/delNotice.vue'
export default {
  data() {
    return {
      dataForm:{
        size:50,
        current:1,
      },
      tableData: [],
      total:1,
      ID:'',
    };
  },
  components:{addOrEdit,delNotice},
  mounted(){
    this.getList()
  },
  methods: {
      //当前页
      currentPage(e){
        this.dataForm.current = e;
        this.getList()
      },
      async getList(){
        let res = await examTypeList(this.dataForm)
        this.tableData = res.data.records
        this.total =  res.data.total
      },
       deleteInfo(ID){
        this.$refs.del.showMessageDialog = true;
        this.ID = ID
      },
      async saveDel(){
        let res = await deleteExamType({id:this.ID})
        if(res.code == 200){
          this.$message.success('删除成功！');
          this.$refs.del.showMessageDialog = false;
          this.getList()
        }
      },
      //新增
      addInfo(ID){
        this.$refs.addORedit.dialogVisible = true;
        this.$refs.addORedit.dataForm.typeName = '';
        this.$refs.addORedit.dataForm.unitId = '',//负责单位ID
        this.$refs.addORedit.dataForm.unitName = '',//负责单位名称
        this.$refs.addORedit.dataForm.excellentLine = '',//优秀线
        this.$refs.addORedit.dataForm.goodLine = '',//良好线
        this.$refs.addORedit.dataForm.passLine = '',//及格线
        this.$refs.addORedit.dataForm.remarks = '',//备注
        this.$refs.addORedit.dataForm.id = '',
        this.$refs.addORedit.dataForm.teacherName = '',
        this.ID = ID?ID:'';
      },
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
  /deep/.el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

 /deep/ .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

}
</style>

<style lang="less" scoped>
@import "../../../styles/commonCss.less";
.search-container {
  justify-content: flex-start !important;
  align-items: center;
}
.width70{width: 70px;}
.color-warning{
    width:130px;
    background: #FEF1E8;
    border: 1px solid #F86900;
    >span{color:#F86900;}
    >img{width: 17px!important;height:17px!important}
}
.color-green{
    background:#F9F9F9;
    border: 1px solid #02C86C;
    >span{color: #02C86C;}
    >img{width: 17px!important;height:17px!important}
}
.delete-red{
  color: #FA5339;
  background: #FFEFEF;
  border: 1px solid #FA5339;
}
.edit-green{
    background: #F1FFF8;
    border: 1px solid #02C86C;
    color: #02C86C;
    margin-bottom: 16px;
}
.fsx{
  span{
    display: block;
    margin-bottom: 10px;
  }
}
</style>
